<template>
	<view>
		<view class="cont">
			<view class="mk" v-for="item of list">
				<image :src="item.diaochang.pic" mode=""></image>
				<view class="type">{{item.diaochang.name}}</view>
				<view class="self">
					
					<view class="jl">
						<div>
							<image class="img" src="../../static/dingwei01.png" mode=""></image>
							<span style="margin-left: 10rpx;">{{address}}</span>
						</div>
						<div>{{item.diaochang.juli}}</div>
					</view>
					<view class="price">
						<!-- 费用:<text :class="{{item.diaochang.price == '免费' ? 'clo' :''}}">{{item.diaochang.price}}</text> -->
						   费用:<text :class="item.diaochang.price === '免费' ? 'clo' : ''">{{item.diaochang.price}}</text>
					</view>
					  
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				address:'',
				lon:'',
				lat:'',
				list:[],
			};
		},
		onLoad() {
			this.getLocat()
		},
		onShow() {
			this.getCollect()
			this.getCollectlist()
		},
		methods:{
			getCollectlist(){
				this.$api.post("my/collectlist",{pagenum:1,latitude:this.lat,longitude:this.lon}).then(res =>{
					this.list = res.list
				})
			},
			getLocat(){//获取当前位置
				let that = this
					uni.getLocation({
							type: 'gcj02',
							geocode:true,//设置该参数为true可直接获取经纬度及城市信息
							success: function (res) {
								that.address= res.city
								that.lon = res.longitude
								that.lat = res.latitude
								console.log('当前定位',res,that.address)
							},
							fail: function (e) {
								console.log('定位失败了 应该怎么办',e)
								uni.showToast({
									title: '获取地址失败，将导致部分功能不可用',
									icon:'none'
								});
							},
							complete() {
								// console.error(Error)
							},
						});
				
			},
			getCollect(){
				this.$api.post("my/collectlist",{pagenum:1,latitude:this.lat,longitude:this.lon}).then(res =>{
					
				})
			}
			
		}
	}
</script>

<style lang="scss">
	.cont{
		// padding: 0 27rpx;
		display: flex;
		 flex-wrap: wrap;
		// position: absolute;
		// top: 350rpx;
		// z-index: 99;
		image{
			width: 322rpx;
			height: 360rpx;
		}
		
	}
	.mk{
		background-color: #fff;
		// display: flex;
		 // flex-wrap: wrap;
		  // flex: 1 0 200px; /* 设置项目的 flex 值 */
		  //  word-wrap: break-word; /* 或者使用 overflow-wrap: break-word; */
		width: calc(45% - 10px); /* 每列宽度，减去间距 */
		  // margin-right: 3%; /* 元素右间距 */
		  margin: 2% 3.5%; /* 元素下间距 */
		 position: relative;
	}
	.type{
		position: absolute;
		z-index: 9;
		top: 310rpx;
		left: 20rpx;
		width: 133rpx;
		height: 40rpx;
		background: #000000;
		border-radius: 20rpx;
		opacity: 0.5;
		font-weight: bold;
		font-size: 23rpx;
		color: #FFFFFF;
		line-height: 40rpx;
		text-align: center;
	}
	.xx{
		display: flex;
		padding: 13rpx 18rpx;
		
	}
	.jl{
		padding: 13rpx 18rpx;
		display: flex;
		justify-content: space-between;
		font-weight: 500;
		font-size: 27rpx;
		color: #333333;
		line-height: 32rpx;
		// width: 45%;
		.img{
			width: 18rpx;
			height: 23rpx;
		}
	}
	.price{
		margin: 10rpx 27rpx;
		font-weight: 500;
		font-size: 27rpx;
		color: #333333;
		line-height: 32rpx;
		
	}
	.clo{
		color: #49A3F9;
	}
</style>
